﻿<!DOCTYPE html>

<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="Javascript/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="Style/SearchSelct.css" />
</head>
<body>
    <h1>原生vue学习试验</h1>
    <div id="contains" >        
        <search-select :allow-search="true" @change="SelectChage" :Items="Items" seleted-value="3" >
        </search-select>
        <span v-if="select_val!=''||select_oldval!=''">
          下垃框变更，新值：{{select_val}}，旧值：{{select_oldval}}
        </span>

        <div style="margin-top: 50px;">
            <button @click="componentName='component1'">组件1</button>
            <button @click="componentName='component2'">组件2</button>
            <keep-alive>          
                <component :is="componentName"></component>
            </keep-alive>
       </div>
        <div style="color:red;">fdasf</div>
        <v-h :level="1" style="color: red;">
            标题1
        </v-h>
        <v-h :level="4" >
            <a href="routing.html#home">路由测试:home</a>
        </v-h> 
        <v-h :level="4" >
            <a href="routing.html#about">路由测试:about</a>
        </v-h> 
    </div>

    <script src="Javascript/SearchSelect.js"></script>
    <script src="Javascript/home.js"></script>
</body>
</html>
